<template>
  <div>
    <button id="btn" @click="toggle">mapgis-图层切换</button>
  </div>
</template>

<script setup>
import { onMounted, inject } from "vue";
import { getLayerByName } from "../gis_utils/index";
/* 响应式 [data-template直接响应] */
let $map = null;
let layer = null;
onMounted(() => {
  $map = inject("$map");
  layer = getLayerByName($map, "firstMapx");
});
const toggle = () => {
  /* 地图,图层 */
  let visible = layer.getVisible();
  if (visible) {
    layer.setVisible(false);
  } else {
    layer.setVisible(true);
  }
};
</script>

<style scoped>
#btn {
  width: 200px;
  height: 50px;
  position: fixed;
  top: 20px;
  left: 50px;
  z-index: 100;
}
</style>
